@import '@/styles/hairline.scss';
/** 
原生css 变量定义 =》 类似less scss定义变量
语法： 
  1.定义：--css变量名: css变量值
  2.使用：var( --css变量名 )
作用域：
1. 局部作用域 =》 .类名 {  }
2. 全局作用域 =》 :root {  }
*/
:root {
  /* 全局作用局可以再别的文件内使用：包括但不限于当前页面 */
  --geek-big-font: 50px;
}
.cssVar {
  /* 局部 css 变量 */
  --red-color: red;
  --bd-red: 3px solid #0fc;
  color: var(--red-color);
  border: var(--bd-red);
  font-size: var(--geek-big-font);
}
.cssOto {
  /* 读取不到 .cssVar 定义的局部变量 --bd-red */
  border: var(--bd-red);
  /* 可以读取root全局定义的变量 */
  font-size: var(--geek-big-font);
}
.one {
  .top {
    border-bottom: 1px solid rgb(254, 1, 1);
  }
  .btm {
    // 解决 1px 边框像素bug
    position: relative;
    // border-top: 1px solid rgb(7, 250, 3);
    @include hairline(top, #0fc);
  }
}
.icon1 {
  font-size: 30px;
}
